<script setup>
import {onMounted, ref} from "vue";
import {
  getNotGUserListBycid,
  list_QWQ as list,
  removeById,
  removeGradeUserById,
  saveGrade,
  saveUser,
  statusById
} from '@/api/grade'
import {getUserByGradeId} from '@/api/user'
import {Delete} from "@element-plus/icons-vue";
import {ElMessage, ElMessageBox} from "element-plus";

onMounted(() => {
  list().then(res => {
    listData.value = res.data;
  })
});
let listData = ref();
let remove = (id) => {
  ElMessageBox.confirm(
      '确定删除吗',
      '提示',
      {
        cofnfirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        removeById(id).then(res => {
          if (res.code == 200) {
            ElMessage.success("删除成功！")
            list().then(res => {
              listData.value = res.data;
            })
          }
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消',
        })
      })
}
let gradeId = ref()
let content = (id) => {

  console.log(userList.value)
  dialogVisible.value = true
  getUserByGradeId(id).then(res => {
    userList.value = res.data;
    if (userList.value.length == 0) {
      gradeId.value = id
    }
  })
}
let NotGuserList = ref([]);
let dialogVisible = ref(false)
let userList = ref([])
let removeByUid = (gid, uid) => {
  removeGradeUserById(gid, uid).then(res => {
    ElMessage.success("删除成功!")
    getUserByGradeId(gid).then(res => {
      userList.value = res.data;
    })
  })
}
let addUser = () => {
  let gId = userList.value.length == 0 ? gradeId.value : userList.value[0].gradeId;
  addUserVisibel.value = true;
  dialogVisible.value = false;
  getNotGUserListBycid(gId).then(res => {
    NotGuserList.value = res.data;
  })
}
let addUserVisibel = ref(false)
let selectList = ref([])
let handleSelectionChange = (ids) => {
  selectList.value = [];
  ids.map(id => {
    selectList.value.push(id.id)
  })
  console.log(selectList.value)
}
let save = () => {
  let uIds = selectList.value.toString();
  let gId = userList.value.length == 0 ? gradeId : userList.value[0].gradeId;
  saveUser(typeof gId.value == "undefined" ? gId : gId.value, uIds).then(res => {
    ElMessage.success("添加成功")
    addUserVisibel.value = false
    dialogVisible.value = false
  })
}
let createGrade = () => {
  ElMessageBox.prompt('请输入班级名称', '创建班级', {
    confirmButtonText: 'OK',
    cancelButtonText: 'Cancel',
  })
      .then(({value}) => {
        saveGrade(value).then(res => {
          ElMessage.success("创建成功!")
          list().then(res => {
            listData.value = res.data;
          })
        })
      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消',
        })
      })
}
let endClass = (id) => {
  console.log(id)
  statusById(id.toString()).then(() => {
    ElMessage.success("已结课！")
    list().then(res => {
      listData.value = res.data;
    })
  })
}
let isStatus = ref(null)
let selectByStatus = () => {
  list(isStatus.value).then(res => {
    listData.value = res.data;
  })
}
</script>

<template>


  <div>
    <!--添加用户对话框    -->
    <div>
      <el-dialog
          v-model="addUserVisibel"
          NotGuserList.value=res.data;
          title="添加用户"
          width="30%"

      >
        <!--getNotGUserListBycid-->
        <div>
          <el-table
              :data="NotGuserList"
              @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"/>
            <el-table-column label="用户昵称" prop="nickname"/>
          </el-table>
        </div>
        <template #footer>
          <span class="dialog-footer">
<!--        <el-button @click="dialogVisible = false">取消</el-button>-->
        <el-button type="danger" @click="addUserVisibel = false;dialogVisible = true">
          关闭
        </el-button>
        <el-button type="primary" @click="save">添加 </el-button>
      </span>
        </template>
      </el-dialog>
    </div>
    <!--    班级详情对话框-->
    <div>
      <el-dialog
          v-model="dialogVisible"
          title="班级详情"
          width="30%"
      >
        <div>
          <el-button size="small" @click="addUser">添加用户</el-button>
        </div>
        <div>
          <el-table
              :data="userList"
          >
            <el-table-column :index="index=> index+1 " label="序号" type="index" width="60"/>
            <el-table-column label="用户名称" prop="nickname" width="100"/>
            <el-table-column #default="{row}" label="操作">
              <el-button :icon="Delete" size="small" type="danger" @click="removeByUid(row.gradeId,row.id)"/>
            </el-table-column>
          </el-table>
        </div>
        <template #footer>
      <span class="dialog-footer">
<!--        <el-button @click="dialogVisible = false">取消</el-button>-->
        <el-button type="primary" @click="dialogVisible = false">
          关闭
        </el-button>
      </span>
        </template>
      </el-dialog>
    </div>

    <!--  添加班级-->

    <!--  班级列表-->
    <div style="margin-bottom: 20px;margin-left: 20px">
      <h1>班级管理</h1>
    </div>
    <div style="margin:20px 20px">
      <el-select v-model="isStatus" placeholder="selectIsJieKeQAQ">
        <el-option :key="0" :value="0" label="正常">正常</el-option>
        <el-option :key="1" :value="1" label="结课">结课</el-option>
      </el-select>
      <el-button style="margin-left: 20px" @click="isStatus=null">clear</el-button>
      <el-button style="margin-left: 10px" @click="selectByStatus">查询</el-button>
    </div>
    <div style="margin-left: 20px;margin-bottom: 10px">
      <el-button @click="createGrade">创建班级</el-button>
    </div>
    <div>
      <el-table
          :data="listData"
      >
        <el-table-column :index="index=> index+1 " label="序号" type="index" width="60"/>
        <el-table-column label="班级名称" prop="name" width="120"/>
        <el-table-column #default="{row}" label="状态" width="100">
          <span v-if="row.status==0">
            <el-tag>正常</el-tag>
          </span>
          <span v-else>
            <el-tag type="danger">已结课</el-tag>
          </span>
        </el-table-column>
        <el-table-column label="创建时间" prop="createdTime" width="165"/>
        <el-table-column #default="{row}" label="操作" width="150">
          <el-row :gutter="10">
            <el-col span="2">
              <el-button :icon="Delete" size="small" type="danger" @click="remove(row.id)"/>
            </el-col>
            <el-col span="2">
              <el-button size="small" type="primary" @click="endClass(row.id)">结课</el-button>
            </el-col>
          </el-row>
        </el-table-column>
        <el-table-column #default="{row}" label="班级详情" width="100">
          <el-link size="small" type="primary" @click="content(row.id)">详情</el-link>
        </el-table-column>
      </el-table>
    </div>
  </div>

</template>

